/*
This is the main entry point for all styles
It should import all component stylesheets
*/

// Use duplicate selectors for the light-theme
// stylelint-disable no-duplicate-selectors

// Media breakpoints
$media-sm: 576px;
$media-md: 768px;
$media-lg: 992px;
$media-xl: 1200px;

@import '../../shared/src/global-styles/colors.scss';

// Bootstrap configuration before Bootstrap is imported
$border-radius: 2px;
$border-radius-sm: 1px;
$border-radius-lg: 4px;
$font-size-base: 0.875rem;
$line-height-base: (20/14);

$grid-gutter-width: 1.5rem;

// No max width except for xl.
$container-max-widths: (
    sm: null,
    md: null,
    lg: null,
    xl: 1140px,
);

$body-color: var(--body-color);
$body-bg: var(--body-bg);

$text-muted: var(--text-muted);

// Borders
$border-color: var(--border-color);
.theme-dark {
    --border-color: #{$color-border};
}
.theme-light {
    --border-color: #{$color-light-border};
}

// Links

$link-color: var(--link-color);
$link-hover-color: var(--link-hover-color);

// Alerts

$alert-bg-level: 5;
$alert-border-level: -1;
$alert-color-level: -10;

$alert-bg-level-light: -10;
$alert-border-level-light: -9;
$alert-color-level-light: 6;

// Forms

$input-btn-focus-width: 2px;
$input-focus-border-color: $primary;

// Forms don't manipulate the colors at compile time,
// which is why we can use CSS variables for theming here
// That's nice because the forms theming CSS would otherwise
// be way more complex than it is for other components
$input-bg: var(--input-bg);
$input-disabled-bg: var(--input-disabled-bg);
$input-border-color: var(--input-border-color);
$input-color: var(--input-color);
$input-placeholder-color: var(--input-placeholder-color);
$input-group-addon-color: var(--input-group-addon-color);
$input-group-addon-bg: var(--input-group-addon-bg);
$input-group-addon-border-color: var(--input-group-addon-border-color);

// Tables

$table-cell-padding: 0.625rem;
$table-hover-bg: #0e121b;
$table-border-color: #2b3750;

$table-hover-bg-light: #f2f4f8;
$table-border-color-light: #e4e9f1;

// Progress
$progress-border-radius: 0;
$progress-bg: transparent;
$progress-height: auto;

$hr-border-color: var(--border-color);
$hr-margin-y: 0.25rem;

$code-bg: var(--body-bg);

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/utilities';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/progress';
@import 'bootstrap/scss/tooltip';
@import './global-styles/badge';
@import './global-styles/breadcrumb';
@import './global-styles/card';
@import './global-styles/dropdown';
@import './global-styles/modal';
@import './global-styles/nav';
@import './global-styles/type';
@import '../../shared/src/global-styles/icons';
@import './global-styles/list-group';
@import './global-styles/tables';
@import './global-styles/code';
@import './global-styles/buttons';
@import './global-styles/alert';
@import './global-styles/forms';
@import './global-styles/highlight';

* {
    box-sizing: border-box;
}

html {
    // Base for layout rem values
    font-size: 16px;
}

// stylelint-disable-next-line selector-max-id
html,
body,
#root {
    height: 100%;
}

// Selection highlight is the background color for matched/highlighted tokens,
// e.g. for search results, for identifying the token currently being hovered over,
// or identifying the token the references panel is toggled for
.selection-highlight {
    background-color: rgba(217, 72, 15, 0.5);
}
// Same as above, but indicates highlighting for a fixed hover (vs. e.g.
// an ephemeral mouseover on some token).
.selection-highlight-sticky {
    background-color: rgba(217, 72, 15, 0.5);
}

.theme-light {
    .selection-highlight {
        background-color: rgba(255, 192, 120, 0.5);
    }

    .selection-highlight-sticky {
        background-color: rgba(255, 192, 120, 0.5);
    }
}

.app {
    &__error {
        > hr {
            margin-top: 1rem;
            margin-bottom: 1rem;
            border-color: #93a9c8;
        }

        &-text {
            margin-top: 1rem;
            background-color: #233043;
            padding: 1rem;
        }
    }
}

.form-control::placeholder {
    opacity: 0.5;
}

.spacer {
    flex: 1;
}

.flex-1 {
    flex: 1;
}

// Our simple popovers only need these styles. We don't want the caret or special font sizes from
// Bootstrap's popover CSS.
.popover-inner {
    background-color: var(--body-bg);
    border: solid 1px var(--border-color);
    border-radius: $border-radius;
}

// Show a focus ring when performing keyboard navigation. Uses the polyfill at
// https://github.com/WICG/focus-visible because few browsers support :focus-visible.
:focus:not(:focus-visible) {
    outline: none;
}
:focus-visible {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
}

// Pages
@import './Layout';
@import './api/APIConsole';
@import './discussions/DiscussionsPage';
@import './extensions/ExtensionsArea';
@import './extensions/extension/ExtensionArea';
@import './global/GlobalAlerts';
@import './global/GlobalDebug';
@import './global/Notices';
@import './savedSearches/index';
@import './search/input/ScopePage';
@import './search/input/SearchPage';
@import './search/results/SearchResults';
@import './settings/SettingsFile';
@import './site-admin/SiteInitPage';
@import './site-admin/SiteAdmin';
@import './tree/Tree';
@import './nav/GlobalNavbar';
@import './nav/NavLinks';
@import './auth/ResetPasswordPage';
@import './auth/SignInPage';
@import './auth/SignUpPage';
@import './repo/GitRefTag';
@import './repo/RepoContainer';
@import './repo/settings/RepoSettingsArea';
@import './components/completion/CompletionWidgetDropdown';
@import './components/CopyableText';
@import './components/FilteredConnection';
@import './components/SaveToolbar';
@import './components/DecoratedTextLines';
@import './components/HeroPage';
@import './components/ModalPage';
@import './components/RadioButtons';
@import './components/tooltip/Tooltip';
@import './user/settings/UserSettingsArea';
@import './site-admin/SiteAdminAlert';
@import './site/DockerForMacAlert';
@import './user/UserAvatar';
@import './user/area/UserArea';
@import './org/OrgsArea';
@import './open/OpenPage';
@import './components/AnimatedAlert';
@import './components/DismissibleAlert';
@import './marketing/SurveyPage';
@import './components/SingleValueCard';
@import './repo/blob/discussions/DiscussionsTree';
@import './components/SearchResult';
@import './components/SearchResultMatch';
@import '~@sourcegraph/react-loading-spinner/lib/LoadingSpinner.css';

@import '../../shared/src/index';
